<template>
  <div class="mismatch-finder p-6 bg-gray-50">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <a-textarea
        v-model:value="textA"
        placeholder="输入框 A"
        class="textarea-custom"
      />
      <a-textarea
        v-model:value="textB"
        placeholder="输入框 B"
        class="textarea-custom"
      />
    </div>
    <div class="mt-4">
      <p class="mb-2 font-semibold">不匹配项：</p>
      <div class="bg-white shadow overflow-hidden rounded-lg p-4">
        <ul class="list-disc pl-5 space-y-2">
          <li
            v-for="item in mismatchedItems"
            :key="item"
            class="text-sm text-gray-700"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { Input } from "ant-design-vue";
import { difference, uniq, remove } from "lodash-es";

const textA = ref("");
const textB = ref("");

const mismatchedItems = computed(() => {
  const linesA = textA.value.split("\n").map((line) => line.trim());
  const linesB = textB.value.split("\n").map((line) => line.trim());

  const uniqueLinesA = uniq(linesA);
  const uniqueLinesB = uniq(linesB);

  const diffA = difference(uniqueLinesA, uniqueLinesB).map(
    (line) => `A 有, B 无: ${line}`
  );
  const diffB = difference(uniqueLinesB, uniqueLinesA).map(
    (line) => `B 有, A 无: ${line}`
  );

  return [...diffA, ...diffB];
});
// 模拟用户对象列表
const users = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" },
  { id: 3, name: "王五" },
];
// 用lodash删除指定id的用
const removeUser = (id) => {
  remove(users, (user) => user.id === id);
};
</script>

<style scoped>
.textarea-custom {
  /* Tailwind CSS classes can be added here if needed */
  @apply rounded-lg border border-gray-300 p-2 h-[200px];
}
</style>
